import { ModuleController, ModuleInfo } from "@/controllers";
import { Spin } from "antd";
import React from "react";

/** 模块容器属性 */
export interface IModuleContProps {
    /** 实例id */
    id: string;

    /** 模块id */
    moduleId: string;

    /** 孩子 */
    children?: React.ReactNode;
}

/** 模块容器 */
export const ModuleCont = function(props: IModuleContProps) {

    const moduleController = React.useContext(ModuleController.Context);

    const { id, moduleId } = props;

    const [module, setModule] = React.useState<ModuleInfo>();

    React.useEffect(() => {
        moduleController.creacteModule({ id, moduleId }).then(setModule)
    }, [id, moduleController, moduleId])

    return (
        <React.Suspense fallback={<Loading />}>
            {module?.element ?? <></>} 
        </React.Suspense>
    )
}

function Loading() {
    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }} >
            <Spin />
        </div>
    )
}